<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Like-喜欢鲜花平台！让鲜花从农户到用户一步到位 </title>
		<meta name="keywords" content="喜欢婚礼,婚礼学堂,嘉田美合,婚礼图片,婚礼视频,婚礼VR,婚礼,婚庆" />
		<meta name="description" content="喜欢婚礼平台,以婚礼机构为切入点，以婚礼用花为切入口，整合线下婚礼资源,鲜花,婚礼用品,舞美,人员等" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
		<link rel="stylesheet" type="text/css" href="../../statics/css/cssinit.css" />
		<style type="text/css">
			.header {
				position: fixed;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				padding: 0 15px;
				box-sizing: border-box;
				background-color: #f5f5f5;
				box-shadow: inset 0px -1px 1px -1px #969696;
				z-index: 2;
				top: 0;
			}
			
			.header #backIcon {
				width: 46.5px;
				display: flex;
				align-items: center;
				width: 50px;
			}
			
			.header #backIcon span {
				font-size: 14px;
			}
			
			.header .backIcon {
				width: 10px;
				height: 10px;
				/*border: 2px solid #d9b96e;*/
				border: 2px solid #969696;
				border-bottom: none;
				border-left: none;
				transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				-o-transform: rotate(-135deg);
			}
			
			.header .content {
				font-size: 18px;
				color: black;
			}
			
			.header .custom {
				width: 50px;
				text-align: right;
			}
			
			.header .custom img {
				width: 17.5px;
				height: 17.5px;
				padding-right: 5px;
			}
			
			::-webkit-input-placeholder {
				/* WebKit browsers */
				color: white;
			}
			
			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: white;
			}
			
			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: white;
			}
			
			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: white;
			}
			
			.main {
				position: fixed;
				top: 50px;
				left: 0;
				right: 0;
			}
			
			.sellerinfo {
				height: 125px;
				background: url(../../statics/images/cityWide/sellerShop/bg.png);
				background-position: center;
				padding: 0 10px;
				color: white;
			}
			
			.sellerinfo .info {
				height: 90px;
				padding: 15px 5px;
				border-bottom: 1px solid white;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}
			
			.sellerinfo .info div {
				display: inline-block;
				font-size: 10px;
			}
			
			.sellerinfo .info .shopimage img {
				width: 50px;
				margin-right: 12.5px;
			}
			
			.sellerinfo .info .shopName h3 {
				font-size: 15px;
			}
			
			.sellerinfo .shopmessage {
				height: 35px;
				line-height: 35px;
			}
			
			.sellerinfo .shopmessage span:first-child {
				font-size: 10px;
				padding: 2px;
				background: #48b4f8;
				margin-right: 7.5px;
				margin-left: 5px;
			}
			
			.nav {
				width: 100%;
				height: 40px;
				line-height: 40px;
				font-size: 13px;
				color: #585858;
				border: 1px solid #D6D6D6;
				display: flex;
				background: white;
			}
			
			.nav ul li,
			.nav ul,
			.nav span {
				display: inline-block;
				text-align: center;
			}
			
			.nav ul {
				width: 100%;
				display: flex;
				justify-content: space-around;
				padding: 0 10px;
				box-sizing: border-box;
			}
			
			.nav ul .color {
				color: #65bdd4;
			}
			
			.nav ul li .underline {
				width: 15px;
				border-top: 3px solid #65BDD4;
				position: relative;
				top: -3px;
				margin: 0 auto;
			}
			
			.list {
				width: 100%;
				overflow: hidden;
				padding: 6px;
				box-sizing: border-box;
				background: #F0F0F0;
				min-height:520px;
			}
			
			.list .single {
				background: white;
				float: left;
				width: calc(50% - 12px);
				box-sizing: border-box;
				margin: 6px;
			}
			
			.list .single img {
				width: 100%;
			}
			
			.list .single div {
				display: flex;
				flex-direction: column;
				padding: 10px;
				justify-content: space-around;
			}
			
			.list .single div h3 {
				font-size: 12px;
				color: #303030;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.list .single div h3 img {
				width: 15px;
			}
			
			.list .single p {
				font-size: 10px;
				color: #8A8A8A;
			}
			
			.list .single h4 {
				font-size: 12px;
				font-weight: bolder;
				color: #cfa317;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<div id="backIcon">
				<div class="backIcon"></div><span>返回</span>
			</div>
			<div class="content">鲜花同城</div>
			<div class="custom"><span><img src="../../statics/images/cityPartner/custom.png" alt="客服"/>客服</span></div>
		</header>
		<div class="main">
			<div class="sellerinfo">
				<div class="info">
					<div class="shopimage">
						<img src="../../statics/images/cityWide/shopPic1.png" class="shopPic" />
					</div>
					<div class="shopName">
						<h3 class="sellerName">杨朵拉鲜花工坊(滨江店)</h3>
						<p class="deliveryTime">商家直达，平均40分钟到达</p>
						<p class="describe">鲜花均有云南种植基地提供鲜花云游云南.....</p>
					</div>
				</div>

				<p class="shopmessage"><span>满增</span><span class="notice">全场购满200元，送多肉植物一只，限量50只。</span></p>

			</div>
			<div class="nav">
				<ul class="navList">
					<li class="color">全部
						<div class="underline"></div>
					</li>
					<li>绣球
						<div></div>
					</li>
					<li>桔梗
						<div></div>
					</li>
					<li>兰花
						<div></div>
					</li>
					<li>百合
						<div></div>
					</li>
					<li>康乃馨
						<div></div>
					</li>
					<li>叶材
						<div></div>
					</li>
				</ul>
			</div>
		</div>
		<div style="height: 215px;"></div>
		<div class="list">
			<!--<div class="single">
				<img src="../../statics/images/cityWide/sellerShop/flower.jpg" alt="" />
				<div>
					<h3 class="title"><span>雪山玫瑰</span> <img src="../../statics/images/cityWide/sellerShop/add.png" /></h3>
					<p>守望幸福、浪漫、致远</p>
					<h4 class="price">￥99.9</h4>
				</div>
			</div>-->
	

		</div>

	</body>
	<script id="template" class="clearfix" type="text/html">
		<div class="single" id="{{flowerId}}">
			<img src="{{bigImg}}" alt="" class="img"/>
			<div>
				<h3 class="title"><span>{{flowerName}}</span> <img src="../../statics/images/cityWide/sellerShop/add.png" /></h3>
				<p>{{introduce}}</p>
				<h4 class="price">{{money}}</h4>
			</div>
		</div>
	</script>
	<script src="../../statics/js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/bowersrc/fastclick.js" type="application/javascript" charset="utf-8"></script>
	</script>

	<script type="text/javascript">
		$(function() {
			new FastClick(document.body);
		})
	</script>
	<script type="text/javascript">
		$(".custom").on("click", function() {
			window.location.href = "../../views/service.html";
		})
		$("#backIcon").on("click", function() {
			window.history.back(-1)
		})
		$(".navList li").on("click", function() {
			$(this).addClass("color");
			$(this).find("div").addClass("underline");
			$(".navList li").not($(this)[0]).removeClass("color");
			$(".navList li").not($(this)[0]).find("div").removeClass("underline");
		})

		$(function() {
			var sellerId = window.location.search.split("&")[0].split('=')[1];

			$.get(pathName + '/api/v2/flowercity/show', {
				sellerId: sellerId
			}, function(res) {
				var res = JSON.parse(res);
				console.log(res)
				if(res.code == 0) {
					var data = res.data;
					$(".sellerName").html(data.sellerName);
					$(".deliveryTime").html("商家直达，平均" + data.deliveryTime + "分钟到达");
					$(".describe").html(data.describe);
					$(".notice").html(data.notice);
				} else {
					alert("数据访问失败!");
				}
			});
			$.get(pathName + '/api/v2/flowercity/flower', {
				sellerId: sellerId
			}, function(res) {
				var res = JSON.parse(res);
				console.log(res.data)
				if(res.code == 0) {
					addData(res.data, $(".list"));
					$(".single").on("click", function(e) {
						if(e.target.getAttribute("class") == "img") {
							var id = $(this).attr("id");
							window.location.href = "flowerDetail.html?id=" + id;
						}else if(e.target.getAttribute("class")=="title"){
							

							
						}

					})

				} else {
					alert("请求失败！");
				}
			});

		})
		$(".navList li").on("click", function() {
			var cateName = $(this).text().replace(/\s*$/g, "");
			var flowerId;
			switch(cateName) {
				case "全部":
					flowerId = 0;
					break;
				case "绣球":
					flowerId = 3;
					break;
				case "桔梗":
					flowerId = 4;
					break;
				case "兰花":
					flowerId = 5;
					break;
				case "百合":
					flowerId = 6;
					break;
				case "康乃馨":
					flowerId = 7;
					break;
				case "叶材":
					flowerId = 8;
					break;
				default:
					flowerId = -1;
					break;
			}
			var sellerId = window.location.search.split("&")[0].split('=')[1];
			$(".list").html("");
			$.get(pathName + '/api/v2/flowercity/flower', {
				sellerId: sellerId,
				cateId: flowerId

			}, function(res) {
				var res = JSON.parse(res);
				console.log(res.data)
				if(res.code == 0) {
					addData(res.data, $(".list"));
					$(".single").on("click", function(e) {
						var id = $(this).attr("id");
						window.location.href = "flowerDetail.html?id=" + id;
					})

				} else {
					console.log("没有相关数据！");
				}
			});

		})

		function addData(data, htm) {
			var html = '';
			for(var i = 0; i < data.length; i++) {
				var htmlm = $("#template").html();
				htmlm = htmlm.replace(/\{\{flowerId\}\}/, data[i].flowerId);
				htmlm = htmlm.replace(/\{\{bigImg\}\}/, data[i].bigImg);
				htmlm = htmlm.replace(/\{\{flowerName\}\}/, data[i].flowerName);
				htmlm = htmlm.replace(/\{\{introduce\}\}/, data[i].introduce);
				htmlm = htmlm.replace(/\{\{money\}\}/, data[i].money);
				html += htmlm;
			}
			//				htm.append(html);
			htm.html(html);
		}
	</script>

</html>